<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="alternate icon" class="js-site-favicon" type="image/png" href="images/favicon.png">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/common.css">
    <!-- <link rel="stylesheet" href="css/study.css"> -->
    <link rel="stylesheet" href="css/practise.css">
    <!-- 引入jQuery模块 -->
    <script src="utils/host.js"></script>

    <script src="js/static/jq.js"></script>
    <script src="js/static/axios.min.js"></script>
    <script src="js/common.js"></script>
    <!-- 引入bootstrap.js模块 -->
    <script src="js/static/boot.js"></script>
    <link href="js/static/boot.css" rel="stylesheet">

    <title>字根入门练习</title>
</head>

<body>
<div class="showOnLog">
    <div class="full-screen">
        <div class="message-box">
            <h2>入门须知</h2>
            <div class="content">
                <div>1. 不建议看着字根图打！</div>
                <div>2. 输入正确会跳下一个</div>
                <div>3. 输入错很快重复出现</div>
                <div>4. 三秒内想不起来按空格出提示</div>
            </div>
            <div class="btn-area">
                <div>

                    <input type="checkbox" name="isLog" id="islog">
                    <label for="islog">下次不再提醒</label>
                </div>
                <button class="btn btn-info" id="log-submit">确定</button>
            </div>
        </div>
    </div>
</div>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">
                <img alt="Brand" src="images/brand.png" class="my-brand">
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav module-left">
                <li><a href="index.html">首页 </a></li>
                <li><a href="study.html">新手指南</a></li>
                <li>
                    <a href="#" class="dropdown-toggle color-yellow" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        练习程序<span class="caret"></span>
                        <ul class="dropdown-menu">

                            <li><a href="practice_light.html">光华字根进阶练习</a></li>
                            <li><a href="practice_star.html">星陈字根入门练习</a></li>
                            <li><a href="practice_toy.html">卿云字根进阶练习</a></li>

                            <!--
                            <li><a href="practisePro.html">必拆字练习</a></li>
                            <li><a href="freePractise.html">自由练习</a></li>
							-->

                            <!-- <li role="separator" class="divider"></li> -->
                        </ul>
                </li>
                <li><a href="search.html">拆分查询<span class="sr-only"></span></a></li>

                <li><a href="download.html">下载安装<span class="sr-only"></span></a></li>
                <!--li><a href="tools.html">实用工具<span class="sr-only"></span></a></li-->

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        加入组织<span class="caret"></span></a>
                    <ul class="dropdown-menu">

                        <li><a href="https://jq.qq.com/?_wv=1027&k=2OYDP4Tk">宇浩官方群</a></li>
                        <li><a href="https://t.me/yuhaoim">Telegram群</a></li>
                        <li><a href="https://github.com/forFudan/yuhao/">Github官方仓库</a></li>

                        <!-- <li role="separator" class="divider"></li> -->
                    </ul>
                </li>
                <li><a href="https://kylebing.cn/tools/typepad/">玫枫跟打<span class="sr-only"></span></a></li>
            </ul>
            
            <ul class="nav navbar-nav navbar-right module-right logbtn-box">
                <li><a href="login.html" class="login-btn brand-btn">登录</a></li>
                <li><a href="register.html" class="sign_up-btn brand-btn">注册</a></li>
            </ul>
            
            <ul class="nav navbar-nav navbar-right module-right hidden">
                <li class="hello"><span><span id="loginTime"></span>，<span id="uname"></span><span><a href="#" id="logout"> 注销</a></span></span></li>
            </ul>
            
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="main-content">
    <div class="container">
        <div class="row mt-10">
            <div class="col-md-2"></div>
            <div class="col-md-8 pt-20 bg-white primary-shadow study">
                <div class="h-100">
                    <div class="top">
                        <div class="floatleft">


                        </div>


                        <div class="floatright">
                      <span>
                        &nbsp;当前连击:<strong id="cur">1</strong>&nbsp; 最高连击:<strong id="max">1</strong>&nbsp; 练习总数:<strong id="all">241</strong>&nbsp; 已获积分:<strong id="score">0</strong>&nbsp;&nbsp;
                      </span>
                            <label onchange="changeMainRoot()">
                                <input type="checkbox" id="main-root">
                                只练习大码
                            </label>
                            <button onclick="clearProgress()" class="btn btn-danger">重置进度</button>
                        </div>

                    </div>
                    <div class="center80">
                        <p id="root">口〇</p>
                        <p id="code"></p>

                        <input id="input" class="form-control" style="display: inline-block;" type="text" oninput="inputChanged()">


                        <p id="tip">按空格显示提示</p>
                        <progress id="progress" value="1" max="241"></progress>

                        <div class="color-box hidden login-color-box">
                            <div class="box1">
                                <div class="title">当前排名</div>
                                <div class="trank"><span class="ranknum"></span></div>
                            </div>
                            <div class="box2">
                                <div class="title">距离上一名</div>
                                <div class="trank"><span class="diffScore"></span></div>
                            </div>
                            <div class="box3">
                                <div class="title">目前段位</div>
                                <div class="trank"><span class="tdrww"></span></div>
                            </div>
                            <div class="box4">
                                <div class="title">最高连击</div>
                                <div class="trank"><span class="tchi"></span></div>
                            </div>
                        </div>
                        <div class="color-box unlogin-color-box">
                            <div class="box5">
                                <div class="title">单机模式</div>
                                <div class="trank">请先登录</div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
            <div class="col-md-2"></div>
        </div>
        <div class="row mt-10">
            <div class="col-md-2"></div>
            <div class="col-md-8  bg-white primary-shadow ">
                <div class="drww-box">
                    <div class="title"><span>宇浩名人榜</span></div>
                    <div class="mini_title"><span>该排名实时刷新，每季度重置一次。</span></div>
                    <div class="rank mt-10 ">
                        <div class="rank-header">
                            <div class="he1">排名</div>
                            <div class="he2">昵称</div>
                            <div class="he3">分数</div>
                            <div class="he3">连击</div>
                            <div class="he4">段位</div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-md-2"></div>
        </div>
    </div>
</div>

<div class="footer hidden visible-lg">
    <div class="row">
        <div class="col-xs-12 col-md-4">
            <img src="images/brand.png" alt="helloworld综合资源web服务" class="my-brand1">
            <p class="footer-title1">宇浩输入法 </p>
        </div>

        <div class="col-xs-12 col-md-4">
            <ul class="rec-list flex-col">
                <li><span class="footer-title">友情链接</span></li>
                <li><a href="https://rime.im/">Rime输入法引擎</a></li>
                <li><a href="https://www.jsxiaoshi.com/">极速打字网</a></li>
                <li><a href="http://xumax.cn/">徐码输入法</a></li>
                <li><a href="http://cjhk.org/">仓颉输入法</a></li>
            </ul>
        </div>

        <div class="col-xs-12 col-md-4">
            <ul class="about-list flex-col">
                <li><span class="footer-title">关于</span></li>
                <li><a href="#">关于宇浩码</a></li>
                <li><a href="#">关于作者</a></li>
            </ul>
        </div>

    </div>
</div>
<style>


    @font-face {
        font-family: 'YuhaoSongti';
        src: url("./fonts/YuhaoSongti.ttf");
        /*src: url("https://zhuyuhao.com/yuhao/fonts/YuhaoSongti.ttf");*/
    }

    #root {
        font-family: YuhaoSongti, Consolas, Lucida Console, Helvetica, Arial, Times New Roman, Georgia, TumanPUA, Simsun, Simsum-ExtB, Simsun-ExtG, TH-Sung-TP2, TH-Sung-TP0, serif, sans-serif !important;


        margin: auto;
        font-size: 5rem;
        text-align: center;
        width: 100%;
    }

    #code {
        height: 5rem;
        font-family: YuhaoSongti, TumanPUA, Consolas, Lucida Console, Bookerly, Helvetica, Arial, Times New Roman, Georgia, serif, sans-serif !important;
        margin: auto;
        font-size: 3.5rem;
        text-align: center;
        width: 100%;
    }

    #tip {
        font-size: 13px;
        margin-top: 1.5rem;
    }


    .center80 {
        margin: auto;
        position: absolute;
        top: 20%;
        font-size: 30px;


        text-align: center;
        width: 100%;

    }

    .top {
        margin: auto;

        text-align: center;
        width: 100%;
        font-size: small;
    }


    .floatleft {
        margin: 0.3rem;
        text-align: center;
        float: left;

    }


    .floatright {
        margin: 0.3rem;
        text-align: center;
        float: right;
        clear: right;

    }


    #input {

        padding: 0.3rem;
        font-size: 1rem;
        text-align: center;
        width: 20%;
    }


</style>

<script src="js/light.js"></script>
<script src="js/practice.js"></script>
<script id="allow-copy_script">(function e() {
    var e = !1;
    document.addEventListener("allow_copy", (function (t) {
        e = t.detail.unlock
    }));
    var t = ["copy", "cut", "contextmenu", "selectstart", "mousedown", "mouseup", "mousemove", "keydown", "keypress", "keyup"], n = function (t) {
        e && (t.stopPropagation(), t.stopImmediatePropagation && t.stopImmediatePropagation())
    };
    t.forEach((function (e) {
        document.documentElement.addEventListener(e, n, {capture: !0})
    }))
})()</script>
</body>
</html>
